// webpack核心配置文件---主要用于进行打包配置,
//主要用于操作五大核心

//1.引入模块(各种需要使用的模块)
const path = require('path');// 主要用于处理路径相关的内容
//引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html的插件
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin // 清除dist目录插件
//环境检测
// console.log('=======>', process.env.NODE_ENV);

//自动打包相关的js文件
let entry = {};
//使用nodejs中全局模块 glob()
let glob = require('glob');
//获取所有页中的js模块
//glob.sync('找js文件规则')   
let str = glob.sync('./src/pages/*/*.js');//找到所有pages下面所有的js文件
str.forEach(v => {
    let chunksName = path.basename(v, '.js');//通过文件名 如: ad.js 去掉 .js ==>ad
    entry[chunksName] = v;
})

//自动处理html
let html = glob.sync('./src/pages/*/*.html');
//遍历
let pages = html.map(v => {
    return new HtmlWebpackPlugin({
        template: v,  // 把index.html复制到dist中 自动引入资源文件
        filename: path.basename(v),//设置输出的名字
        chunks: [path.basename(v, '.html')]//设置当前页面使用哪些模块,默认使用所有模块
    })
})


//2.导出五大核心
module.exports = {
    //五大核心
    //1.入口--entry---基本
    //单入口
    // entry: './src/js/index.js', // 表示从index.js开始打包,写的是需要打包的文件路径
    entry: entry,

    //2.出口--output---基本
    output: {
        path: path.resolve(__dirname, 'dist'),//固定写法,表示打包好的文件都会放在dist目录中
        filename: 'js/[name].js',//打包好,输出的文件  
        publicPath: './'//默认公共路径  
    },
    //3.加载器---module 
    module: {
        //规则
        rules: [
            //处理css
            {
                test: /\.css$/,//表示匹配所有了.css文件
                use: [{
                    loader: MiniCssExtractPlugin.loader, // 提取css
                    options: {
                        publicPath: '../' // 资源查找路径
                    }
                }, 'css-loader']// 使用哪些加载器
            },
            //处理less
            {
                test: /\.less$/,//表示匹配所有了.less文件
                use: [{
                    loader: MiniCssExtractPlugin.loader, // 提取css
                    options: {
                        publicPath: '../' // 资源查找路径
                    }
                }, 'css-loader', 'less-loader']// 使用哪些加载器
            },
            //处理css中的图像
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',//使用单个加载器
                options: {//配置可选项
                    name: '[hash:10].[ext]',  // 图片输出的名字hash长度10位 默认32位 ext表示原图后缀
                    limit: 10 * 1024,  // 限制图像大小,小于10kb base64处理
                    // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,
                    outputPath: 'imgs' // 图片输出的文件夹        
                }
            },
            //html中的img
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },
            //字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //ES6转ES5 
            {
                test: /\.js$/,//匹配所有的js文件
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除node_modules
            }
        ]
    },
    //4.插件--plugins
    plugins: [
        //清除dist目录
        new CleanWebpackPlugin(),
        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name].css' // 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin(), // 压缩css
    ].concat(pages),
    //5.模式--mode---基本
    mode: process.env.NODE_ENV,

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8848,  // 端口
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'ad.html', // 打开的页面-默认值打开哪个页面
    },
    target: 'web', // 目标是浏览器

}



